<template>
    <view class="container">
        <view class="avatar-box">
            <view class="avatar" :style="`--img: url(${ avatar })`"></view>
        </view>
        <view class="content-box">
            <view class="username-box">
                <view class="username">{{ username }}</view>
                <view class="sex" :style="`--bg: ${ sex == '男' ? 'rgb(0, 170, 255)' : 'rgb(255, 170, 200)' }; --img: url(${ base_url + (sex == '男' ? '/static/boy-icon.svg' : '/static/girl-icon.svg') }); --bgs: ${ sex == '男' ? '40%' : '50%' };`"></view>
            </view>
            <view class="msg">{{ msg }}</view>
        </view>
        <view class="time-box">
            <view class="time">{{ time }}</view>
            <view class="msgCount" v-show="msgCount > 0">{{ msgCount < 99 ? msgCount : '99+' }}</view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import { base_url } from '../../api/config';

const props = defineProps({
    avatar: String,
    username: String,
    msg: String,
    time: String,
    sex: String,
    msgCount: Number,
});

</script>

<style scoped lang="less">
.container {
    box-sizing: border-box;
    width: 100%;
    height: 18vw;
    padding: 3vw;
    display: flex;
    align-items: center;
    gap: 2vw;

    .avatar-box {
        --size: 12vw;
        width: var(--size);
        height: var(--size);

        .avatar {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-image: var(--img);
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
        }
    }

    .content-box {
        flex: 1;
        overflow: hidden;

        .username-box {
            font-size: 4vw;
            font-weight: 900;
            display: flex;
            align-items: center;
            gap: 2vw;

            .sex {
                width: 6vw;
                height: 4vw;
                background-color: var(--bg);
                background-image: var(--img);
                background-size: var(--bgs);
                background-repeat: no-repeat;
                background-position: center;
                border-radius: 2vw;
            }
        }

        .msg {
            font-size: 3vw;
            color: #888;
        }
    }

    .time-box {
        width: 20vw;
        height: 100%;
        position: relative;

        .time {
            text-align: right;
            font-size: 2vw;
            color: #888;
            line-height: 10vw;
        }

        .msgCount {
            --size: 4.5vw;
            width: var(--size);
            height: var(--size);
            position: absolute;
            right: 0;
            bottom: 0;
            font-size: 2vw;
            font-weight: 900;
            line-height: var(--size);
            text-align: center;
            color: #fff;
            background-color: #f00;
            border-radius: 50%;
        }
    }
}
</style>